<template>
	<div class="lbigBox">
		<div class="userNav">
			<div>
				<div class="dealerImg"></div>
				<div>
					<a href="#/home/systemmanage" style="color: #000000;">
						系统账号管理
					</a>
				</div>
				<div class="crumbs"></div>
				<div>修改系统账号</div>
			</div>

		</div>
		<div class="bigBoxbot">
			<div class="information">
				账号资料
			</div>
			<div class="systemAddform">
				<div class="addSide">
					<div><small>*</small>名称：</div>
					<div><input type="text" placeholder="请输入名称" v-model="companyName" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系人：</div>
					<div><input type="text" minlength="2" maxlength="15" placeholder="请输入联系人" v-model="linkman" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系电话：</div>
					<div><input type="text" id="phone" placeholder="请输入联系电话" v-model="telephone" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
					<span style="margin-left: 30px; color: red;font-size: 12px;" v-show="promptel">请输入正确的11位有效手机号</span>
				</div>
				<div class="addSide">
					<div><small>*</small>公司地址：</div>
					<div><input type="text" placeholder="请输入公司地址" v-model="companyAddress" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide" v-for="v,i in edatas" :key="i">
					<div><small>*</small>生产地址<span v-if="i!=0">{{i+1}}</span>：</div>
					<div><input type="text" placeholder="请输入生产地址" v-model="edatas[i].address" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/></div>
					<div class="address" v-if="i===0">						
						<input type="button" value="新建一个地址" @click="address"  v-if="i===0" />
					</div>
					
					<div class="remove" v-else>
						<input type="button" value="删除" @click="remove(i)" />
					</div>
				</div>
			</div>
			<div class="xian" style="width: 100%; height: 1px;background-color: #DDDDDD; margin-top: 30px;"></div>
			<!--提示框-->
			<div id="tipMsg" v-show="istipMsgs">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">恭喜，保存成功！</p>
							<div class="yesNo">
								<a href="#/home/systemmanage"><input type="button" value="确定" id="configNew" @click="confirmNew"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--提示框-->
			<div id="tipMsg" v-show="istipMsg">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
							<div class="yesNo">
								<input type="button" value="取消" id="yes" @click="abolish">
								<input type="button" value="确定" id="no" @click="confirm">
							</div>
						</div>
					</div>
				</div>
			</div>	
	<!--登陆账户重复提示框-->
			<div id="tipMsg" v-show="NewistipMsg">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">该登录名已被占有，请重新输入</p>
							<div class="yesNo">
								<a href="javascript:;"><input type="button" value="确定" id="Newconfig" @click="Newconfirm"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="information">
				账号设置
			</div>
			<div class="systemAddform">
				<div class="addSide">
					<div><small>*</small>登录名：</div>
					<div><input type="text" placeholder="请输入登录名" v-model="account" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
					<span style="margin-left: 30px; color: red;font-size:12px;" v-show="prompt" v-model='verifyAccount'>请输入6-20个数字、字母或组合</span>
				</div>
				<div class="addSide">
					<div><small>*</small>密码：</div>
					<div><input type="password" placeholder="请输入密码" v-model="password" @focus="inputFocus($event,'password')" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
					<span style="margin-left: 30px; color: red;font-size:12px;" v-show="prompts">请输入6-20个数字、字母或组合</span>
				</div>
				<div class="systemSave" @click="save">
					<a href="javascript:;">
						保存
					</a>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	import { mapActions } from 'vuex'
	export default {
		name: 'user',
		data() {
			return {
				users: [],
				addRemove: false,
				account: "",
				companyName: "",
				companyAddress: "",
				linkman: "",
				telephone: "",
				password: "",
				Address: "",
				istipMsgs: false,
				sideList: [''],
				NewistipMsg: false,
				WistipMsg: false,
				edatas: [],
				passwordChange: false,
				textChange:false,
				prompt: false,
				prompts: false,
				promptel: false,
				intercept:false,
				istipMsg:false,
				verifyAccount:""
			}
		},
		filters: {

		},
		beforeRouteLeave(to, from, next) {
        this.toPath = to.path
        if (this.intercept == false) {
            this.istipMsg = true
        } else if (this.intercept == true) {
            this.istipMsg = false
            next()
         }
        },
		created: function() {
			var userName = sessionStorage.getItem('userName')
			if(!userName) {
				this.WistipMsg = true
			} else {
				// 获取数据             
				this.edata = JSON.parse(localStorage.edata)
				this.seesystem({
					id: this.edata
				}).then((data) => {
					var self = this
					self.edata = data.data.account
					self.edatas = data.data.addressList
					self.account = self.edata.account
					self.companyName = self.edata.companyName,
						self.companyAddress = self.edata.companyAddress,
						self.linkman = self.edata.linkman,
						self.telephone = self.edata.telephone,
						self.password = '......',
						self.id = self.edata.id,
						self.verifyAccount=self.edata.account
				})
			}
		},
		methods: {
			//      	是否登陆
			Wconfirm: function() {
				this.WistipMsg = false
				this.$router.push({
					path: '/login'
				})
			},
			//  	  提示框  
			Newconfirm: function() {
				this.NewistipMsg = false
			},
			inputFocus: function(e, type) {
				e.srcElement.style.borderColor = '#DDDDDD'
				this.prompt = false
				this.prompts = false
				this.promptel = false
				if(type === 'password') {
					this.passwordChange = true
					this.password = ''
				}
			},
			confirm: function() {
				this.istipMsg = false
				this.intercept = true
				var url = this.toPath
                this.$router.push({
                path: url
            })
			},
			abolish: function() {
				this.istipMsg = false
			},
			address: function() {
				this.edatas.push({
					address: ''
				})
			},
			remove: function(i) {

				this.deleteProduceAddress({
					id: this.edatas[i].id
				}).then((data) => {
				})
				this.edatas.splice(i, 1)
			},
			confirmNew: function() {
				var self = this
				this.intercept == true
				self.istipMsg = false
				self.istipMsgNew = false
			},
			//        表单验证
			valior: function() {
				var flag = true
				var errArr = []
				var pattern = /[`~!@#\$%\^\&\*_\+<>\?:"\{\},\\\/;'\[\]]/
				var user = /^[a-zA-Z0-9.]{6,20}$/
				var patterna = /^[0-9]{11,11}$/
				var kongge=/\s+/g
				var sideList=[]
				for(var i=0;i<this.edatas.length;i++){
					sideList.push(this.edatas[i].address)
				}
				console.log(sideList)
				var topArr = [this.companyName, this.linkman, this.telephone, this.companyAddress].concat(sideList)
				for(var i = 0; i < topArr.length; i++) {
					if(!topArr[i] || (topArr[i] === '') || pattern.test(topArr[i])||kongge.test(topArr[i])) {
						errArr.push(i)
					}
				}
				var systemAddformTop = document.getElementsByClassName('systemAddform')[0]
				var inputTop = systemAddformTop.getElementsByTagName('input')
				for(var i = 0; i < inputTop.length; i++) {
					if(errArr.indexOf(i) !== -1) {
						flag = false
						inputTop[i].style.borderColor = 'red'
					}
				}
				var errArrBot = []
				var botArr = [this.account, this.password]
				for(var i = 0; i < botArr.length; i++) {
					if(!botArr[i] || (botArr[i] === '') || pattern.test(botArr[i])||kongge.test(topArr[i])) {
						errArrBot.push(i)
					}
				}
				var systemAddformBot = document.getElementsByClassName('systemAddform')[1]
				var inputBot = systemAddformBot.getElementsByTagName('input')
				for(var i = 0; i < inputBot.length; i++) {
					if(errArrBot.indexOf(i) !== -1) {
						flag = false
						inputBot[i].style.borderColor = 'red'
					}
				}
				if(! patterna.test(this.telephone)) {
					inputTop[2].style.borderColor = 'red'
					this.promptel = true
					flag = false
				}
				if(! user.test(this.account)) {
					this.prompt = true
					flag = false
				}
				if(!user.test(this.password)) {
					this.prompts = true
					flag = false
				}
				return flag
			},
			//保存数据
			save: function() {
				if(!this.valior()) {
					return
				}			
				var self = this;
				if(self.account===self.verifyAccount){
						var accountObj = {
					account: self.account,
					companyName: self.companyName,
					companyAddress: self.companyAddress,
					linkman: self.linkman,
					logicDelete: '',
					telephone: self.telephone,
					id: self.id
				}
				if(this.passwordChange) {
					accountObj.password = self.password
				}
				var paramJson = {
					"addressList": this.edatas,
					"account": accountObj
				};
				var paramJson1 = JSON.stringify(paramJson);
				this.amendsystem({
					paramJson: paramJson1

				}).then((data) => {
				              if(data.code == 200) {
				              	this.intercept=true
								  this.$message({
                                  type: 'info',
                                  message: '修改成功!'
                                 })
								  this.$router.push({
                                  path: '/home/systemmanage'
                                }) 
							}else{
								  this.$message({
                                  type: 'info',
                                  message: '服务器异常，请重试!'
                                 })
							}
				    })
				}else{
						this.validataAccountIsExist({
					account: self.account
				}).then((data) => {
					if(data.data !== 0) {
						this.NewistipMsg = true
					} else {
				var accountObj = {
					account: self.account,
					companyName: self.companyName,
					companyAddress: self.companyAddress,
					linkman: self.linkman,
					logicDelete: '',
					telephone: self.telephone,
					id: self.id
				}
				if(this.passwordChange) {
					accountObj.password = self.password
				}
				var paramJson = {
					"addressList": this.edatas,
					"account": accountObj
				};
				var paramJson1 = JSON.stringify(paramJson);
				this.amendsystem({
					paramJson: paramJson1

				}).then((data) => {
				              if(data.code == 200) {
				              	this.intercept=true
								  this.$message({
                                  type: 'info',
                                  message: '修改成功!'
                                 })
								  this.$router.push({
                                  path: '/home/systemmanage'
                                }) 
							}else{
								  this.$message({
                                  type: 'info',
                                  message: '服务器异常，请重试!'
                                 })
							}
				})
				}
				})
				}	
			},
			...mapActions(['amendsystem', 'seesystem', 'validataAccountIsExist', 'deleteProduceAddress'])
		}
	}
</script>
<style scoped>
	.bigBoxbot{
		width: 100%;		
		background-color: #FFFFFF;
		height: calc(100vh - 90px);
	    overflow-x:hidden ;	   
	    margin-top: 10px;
	}
input::-ms-clear{display:none;}
input::-ms-reveal{display: none;}
	.lbigBox{
	height: calc(100vh - 90px);
	overflow-x:hidden ;
	overflow-y:scroll;
}
	.userNav {
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 3px 3px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.userNav>div:nth-child(1) {
		width: 420px;
		height: 25px;
		display: flex;
		margin-left: 35px;
		align-content: center;
	}
	
	.userNav>div:nth-child(1) img {
		width: 25px;
		height: 25px;
	}
	
	.userNav>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT {
		width: 220px;
		display: flex;
		align-items: center;
	}
	
	.userNavT>div:nth-child(1) {
		display: flex;
	}
	
	.userNavT>div:nth-child(1) img {
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}
	
	.userNavT>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT>div:nth-child(2) {
		color: #888;
		font-size: 14px;
		cursor: pointer;
	}
	
	.user {
		position: relative;
	}
	
	.information {
		font-size: 14px;
		margin-left: 40px;
		margin-top: 35px;
		color: #999999;
	}
	
	.systemAddform {
		margin-top: -30px;
		margin-left: 300px;
	}
	
	.addSide {
		margin-top: 15px;
		height: 55px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.addSide small {
		font-size: 14px;
		color: red;
		margin-right: 5px;
	}
	
	.addSide>div:nth-child(1) {
		width: 150px;
		text-align: right;
		font-size: 14px;
		color: #000;
	}
	
	.addSide input {
		margin-left: 40px;
		width: 350px;
		height: 35px;
		border: 1px solid #DDDDDD;
		border-radius: 5px;
		padding-left: 5px;
		font-size: 14px;
	}
	
	.address input {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: 1px solid #43DCE7;
		background-color: #FFFFFF;
	}
	.address input {
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		color: #43DCE7;
	}
	
	.address a:hover {
		text-decoration: none;
	}
	
	.remove input {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: 1px solid #E96565;
		background-color: #FFFFFF;
	}
	
	.systemSave {
		width: 150px;
		height: 32px;
		background-color: #43DCE7;
		border-radius: 5px;
		margin-top: 30px;
		margin-left: 180px;
	}
	
	.systemSave a {
		display: inline-block;
		width: 150px;
		height: 32px;
		color: #FFFFFF;
		text-align: center;
		line-height: 32px;
	}
	
	.remove input{		
		text-align: center;
		line-height: 30px;
		color: #E96565;
	}	
	.remove a:hover {
		text-decoration: none;
	}
	
	a {
		text-decoration: none;
	}
	/*弹出框*/
	
	.tipBox {
		width: 560px;
		height: 200px;
		border-radius: 5px;
		box-shadow: 0 7px 12px #5F5F5F;
		position: fixed;
		z-index: 400;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.tipBox {
		animation: bounce-in .8s;
	}
	
	@keyframes bounce-in {
		0% {
			transform: translateY(-50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.tipBox div:nth-child(1) {
		height: 50px;
		line-height: 50px;
		background: #F49362;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.tipBox>div:nth-child(2) {
		height: 150px;
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.tipBox p {
		margin: 0;
	}
	
	.yesNo input {
		float: right;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.yesNo input {
		width: 80px;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		color: #fff;
	}
	
	.yesNo input:nth-child(2) {
		background: #43dce7;
		margin-right: 20px;
	}
	
	.yesNo input:nth-child(1) {
		background: #999;
	}
	
	.approval-leave-bg {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		overflow: hidden;
		z-index: 300;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}
	
	#configNew {
		background: #43DCE7;
	}
	.dealerImg{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -76px -200px;
	}
		.crumbs{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -138px -39px;
	}
</style>